<template>
  <el-row class="searchFactory">
    <div style="padding-top: 10px">工厂名称</div>
    <el-input class="factoryInput" v-model="factoryName"></el-input>
    <el-button class="searchBtn" @click="search()">查询</el-button>
    <el-button class="resetBtn" @click="reset()">重置</el-button>
  </el-row>
  <el-row class="formCard">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" width="50">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工厂名称" width="200">
        <template #default="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工厂简介" width="250">
        <template #default="scope">
          <span>{{ scope.row.detail }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责人" width="180">
        <template #default="scope">
          <span>{{ scope.row.manager }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系方式" width="180">
        <template #default="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="登录账号" width="180">
        <template #default="scope">
          <span>{{ scope.row.account }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工厂状态" width="180">
        <template #default="scope">
          <span>{{ scope.row.state }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="mini"
            type="danger"
            @click="closeClick(scope.row)"
            v-show="scope.row.state == '正常'"
            >关停</el-button
          >
          <el-button
            size="mini"
            @click="openClick(scope.row)"
            v-show="scope.row.state == '关停'"
            type="success"
            >开启</el-button
          >
          <el-button size="mini" @click="editClick(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
  <el-dialog title="更改工厂" v-model="dialogFormVisible">
    <el-form :model="selectUser">
      <el-form-item label="工厂名称" :label-width="formLabelWidth">
        <el-input v-model="selectUser.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="工厂简介" :label-width="formLabelWidth">
        <el-input v-model="selectUser.detail" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="负责人" :label-width="formLabelWidth">
        <el-input v-model="selectUser.manager" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" :label-width="formLabelWidth">
        <el-input v-model="selectUser.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="登录账号" :label-width="formLabelWidth">
        <el-input v-model="selectUser.account" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
  name: 'factoryManage',
  data() {
    return {
      tableData: [
        {
          id: '',
          name: '',
          detail: '',
          manager: '',
          phone: '',
          account: '',
          state: '',
        },
      ],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      selectUser: {},
      factoryName: '',
      newTable: [],
    }
  },
  mounted() {
    this.getFactories()
  },
  methods: {
    getFactories() {
      axios
        .get('/factory/getAllFactory')
        .then((res) => {
          console.log(res.data.data)
          this.tableData = res.data.data
          this.newTable = this.tableData
          this.tableData = this.newTable.filter((val) => val.name != '产能中心')
        })
        .catch((err) => {
          console.error(err)
        })
    },
    editClick(e) {
      this.dialogFormVisible = !this.dialogFormVisible
      this.selectUser = e
    },
    confirmEdit() {
      axios
        .post('/factory/modifyFactory', this.selectUser)
        .then((res) => {
          console.log(res)
          if (res.data.code == 200) {
            console.log(success)
          }
        })
        .catch((failResponse) => {
          console.log('fail msg')
          console.log(failResponse)
        })
      this.dialogFormVisible = false
      ElMessage.success({
        message: '修改成功',
        type: 'success',
      })
    },
    openClick(f) {
      this.selectUser = f
      f.state = '正常'
      axios
        .post('/factory/openFactory', this.selectUser)
        .then((res) => {
          console.log(res)
          if (res.data.code == 200) {
            console.log(success)
          }
        })
        .catch((failResponse) => {
          console.log('fail msg')
          console.log(failResponse)
        })
    },
    closeClick(f) {
      this.selectUser = f
      f.state = '关停'
      axios
        .post('/factory/closeFactory', this.selectUser)
        .then((res) => {
          console.log(res)
          if (res.data.code == 200) {
            console.log(success)
          }
        })
        .catch((failResponse) => {
          console.log('fail msg')
          console.log(failResponse)
        })
    },
    search() {
      this.newTable = this.tableData
      this.tableData = this.newTable.filter(
        (val) => val.name == this.factoryName
      )
    },
    reset() {
      this.getFactories()
    },
  },
}
</script>

<style lang="less" scoped>
.el-input {
  width: 10rem;
  padding: 0 30px 30px 30px;
  font-size: 1.2em;
}
.el-button {
  height: 10px;
}
.addBtn {
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  font-weight: bold;
}
</style>
